<template>
    <div id="ssq">
        <table>
            <tr>
                <th>期号</th>
                <th>开奖日期</th>
                <th>中奖号码</th>
            </tr>
            <template v-if="ssqData.data.length">
                <tr v-for="(item,key) in ssqData.data" :key="key">
                    <td>{{item.period}}</td>
                    <td>2</td>
                    <td>
                        <span v-for="(num,key) in item.winnerNumber" :key="key"
                        :class="{winNum:true,redball:key<=5,blueball:key==6}"
                        >
                            {{num}}
                        </span>
                    </td>
                </tr>
            </template>
        </table>
        <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="100"
                
                >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            ssqData:{data:[]},
            total:1,
        }
    },
    methods:{
        loadMore(num){
            this.show = false;
            this.loadData(10,num)
        },
        loadData(pageSize,pageNum){
            console.log(this.ssqData.data)
            this.$http.get(this.$apis.findByGameName,{gameName:'ssq',pageSize:pageSize,pageNo:pageNum})
            .then((resp)=>{
                
                this.ssqData = resp.data.data;
                this.total = resp.data.total;
               
            })
        },
    },
    computed:{
    },
    mounted() {
        this.loadData(10,0)
    }
}
</script>
<style lang="scss" scoped>
    #ssq{
        position: absolute;
        width: 87.4%;
        height: 92.1%;
        top: 60px;
        left: 200px;
        background: white;
    }
    .winNum{
        width: 22px;
        height: 22px;
        display: inline-block;
        margin-left: 10px;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        text-align: center;
        line-height: 22px;
    }
    .redball{
        background: #d70a0a;
    }
    .blueball{
        background: #0099ca
    }
</style>
